<template>
  <div class="main-content">
    <div class="filter-container">
      
  
          <el-input class="filter-item"
            v-model="getListData.usercode"
            placeholder="账号查询"
            clearable
            style="width:200px;"
          ></el-input>
      
       
          <el-input class="filter-item"
            v-model="getListData.name"
            placeholder="姓名查询"
            clearable
                 style="width:200px;margin-left:50px;"


          ></el-input>
      
          <el-input class="filter-item"
            v-model="getListData.mobile"
            placeholder="联系方式查询"
            clearable
                   style="width:200px;margin-left:50px;"


          ></el-input>
        
          <el-input class="filter-item"
            v-model="getListData.email"
            placeholder="联系邮箱查询"
            clearable
                      style="width:200px;margin-left:50px;"


          ></el-input>
       
          <el-date-picker class="filter-item"
            v-model="getListData.created"
            type="daterange"
            range-separator="->"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd"
            style="margin-left:50px;"
            
          >
          </el-date-picker>
    
    
    </div>
    <el-row>
        <el-button
          size="medium"
          class="filter-item"
          type="primary"
          @click="getList"
          >查询</el-button
        >
        <el-button size="medium" class="filter-item" @click="resetSearch"
          >重置</el-button
        >
        <el-button size="medium" type="success"  @click="exportOrder"
          >导出
        </el-button>
      </el-row>

    <p class="maintitle">登录信息列表</p>
    <el-table :data="tableData" border>
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column prop="id" label="ID" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="usercode"
        label="账号"
       
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
       
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="联系方式"
       
        align="center"
      >
      </el-table-column>
       <el-table-column
        prop="email"
        label="联系邮箱"
        
        align="center"
      >
      </el-table-column>
       <el-table-column
        prop="ip"
        label="登录ip"
        
        align="center"
      >
      </el-table-column>
       <el-table-column
        prop="ip_address"
        label="ip所属地址"
        
        align="center"
      >
      </el-table-column>
       <el-table-column
        prop="created"
        label="登录时间"
       
        align="center"
      >
      </el-table-column>
     
    </el-table>

    <pagination
     
      v-show="totalPage > 0"
      :total="totalPage"
      :page.sync="getListData.pageNo"
      :limit.sync="getListData.pageSize"
      @pagination="getList"
    ></pagination>

    

   
  </div>
</template>

<script>
import { Message } from "element-ui";
import {
  historyList,
  exportHistory
} from "@/app/api/system";
import { mapState } from "vuex";
import Pagination from "@/app/components/Pagination";

export default {
  components: {
    Pagination,
  },
  name: "History",
  data() {
    return {
      importVisible: false,
      loading: false,
      tableData: [],
      totalPage: 1,
      listLoading: true,
      getListData: {
        pageNo: 1,
        pageSize: 10,
        usercode:"",
        name:"",
        created:[],
        mobile:"",
        email:"",
      },
      dialogVisible: false,
      form: {},
      dialogStatus: "", //编辑或新增
      textMap: {
        update: "编辑",
        create: "新增",
      },
      baseurl: api_url,
    };
  },
  computed: {
    ...mapState("user", ["session", "account"]),
  },
  created() {
    
    this.getList();
  },
  methods: {
   
    
    
   
    getList() {
        historyList(this.getListData).then((res) =>{
            this.tableData = res.data.ret;
          this.totalPage = res.data.count;
          this.listLoading = false;
        })
        .catch((error) => {
          console.log("studentSourceList error", error);
        });
    },
     resetSearch() {
    //   this.$refs["sForm"].resetFields();
      this.getListData.created = [];
      this.getListData.name = "";
      this.getListData.usercode = "";
      this.getListData.mobile = "";
      this.getListData.email = "";
      this.getList();
    },
    exportOrder() {
      this.downloadLoading = true;
      exportHistory(this.getListData)
        .then((res) => {
          this.downloadLoading = false;
          window.location.href = this.baseurl + "/" + res.data.path;
        })
        .catch((err) => {
          this.downloadLoading = false;
        });
    },
    
   
  
  
   
    
  },
};
</script>

<style>
.main-content{
  width: 97%;
  height: 840px;
  margin: 1% auto;
  border-radius: 10px;
  box-shadow: 7px 7px 10px 0px rgba(0, 0, 0, 0.25);
  background-color: #fbfbfb;
  padding: 0px;
  position: relative;
}
.maintitle{
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 22px;
  color: #000000;
  margin: 10px 0 20px 10px;
}
</style>
